﻿<!DOCTYPE HTML>
<html>
<head>   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>查看分布</title>
</head>
<body style="margin: 0px;padding: 0px;">
	<div style="position:absolute;left:100px;top:10px;z-index:99"><input type=text id="userIdInput" value=""><input type=button value="定位" onclick=pos(document.getElementById("userIdInput").value)></div>
    <div id="map" style="position:absolute;left:0px;right:0px;width:99%;height:99%;z-index:5" >             
    </div>
</body>
</html>
<!--引用需要的脚本-->
<script src="jquery_1.11.3.min.js"></script>
<script src="libs/SuperMap.Include.js"></script>
<script src="dituhuiTransform.js"></script>
<script type="text/javascript">
function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}
var isPC = IsPC();
//alert(isPC);
var strHref = location.href;
var user = "";
if(strHref.indexOf("user=admin") != -1){
	user = "admin";
}
var map=null;
var layer=null;
var vectorLayer=null;
var markerLayer=null;
var gpsData = "";
var colors=['blue','red','orange','yellow','green','cyan','purple','maroon','mediumslateblue','darkslategray','darkolivegreen'];
$(function(){
	initMap();//初始化地图
})
function initMap(){
	map = new SuperMap.Map("map", { allOverlays: true });
	layer = new SuperMap.Layer.CloudLayer();
	vectorLayer = new SuperMap.Layer.Vector("vector Layer");
	markerLayer = new SuperMap.Layer.Markers("marker Layer");
	map.addLayers([layer, vectorLayer, markerLayer]);
	//默认显示北京
	map.setCenter(new SuperMap.LonLat(12958400.883957,4852082.440605948), 12);

	getGPS();
}
//画线
function drawPoints(data){
	if(user == "admin"){
		// 管理员
		//alert(user);
		$.each(data,function(i,o){
			var arr = o.split(",");
			if(arr[7] > 0){
				var accountId = arr[0];
				var superMapPoint = new SuperMap.LonLat(arr[7],arr[8]);
				var meterPoint=Dituhui.latLonToMeters(superMapPoint);
				var size;
				if(isPC){
					size = new SuperMap.Size(22,16);
				}else{
					// 手机上需要设置大一点
					size = new SuperMap.Size(33,25);
				}
				var offset = new SuperMap.Pixel(-(size.w/2), -size.h); 
				var icon = new SuperMap.Icon('theme/images/marker.png', size, offset); 
				// 初始化标记覆盖物类
				var marker = new SuperMap.Marker(new SuperMap.LonLat(meterPoint.lon, meterPoint.lat),icon);
				// 添加覆盖物到标记图层
				markerLayer.addMarker(marker);
				//注册 click 事件,触发 mouseClickHandler()方法
				marker.events.on({"click":mouseClickHandler,
					"touchstart":mouseClickHandler //假如要在移动端的浏览器也实现点击弹框，则在注册touch类事件
				});
				//定义mouseClickHandler函数，触发click事件会调用此函数
				function mouseClickHandler(event){
					closeInfoWin();

					var contentHTML;
					if(isPC){
						contentHTML = "<div style='width:80px; font-size:12px;font-weight:bold ; opacity: 0.8'>"; 
					}else{
						// 手机上需要设置大一点
						contentHTML = "<div style='width:80px; font-size:24px;font-weight:bold ; opacity: 0.8'>"; 
					}
					contentHTML += accountId;
					contentHTML += "<br>";
					contentHTML += "<div onclick='viewPath(\""+accountId+"\")' style='color:blue;text-decoration:underline;cursor:hand'>查看轨迹</div>";
					contentHTML += "</div>";

					//初始化FramedCloud类
					var framedCloud = new SuperMap.Popup.FramedCloud(
						"chicken", 
						marker.getLonLat(),
						null,
						contentHTML,
						icon,
						true,
						null,
						true
					);

					infowin = framedCloud;
					map.addPopup(framedCloud);
				}
			}
		});
	}else{
		// 普通用户
		var features=[];
		$.each(data,function(i,o){
			var arr = o.split(",");
			if(arr[7] > 0){
				var superMapPoint = new SuperMap.LonLat(arr[7],arr[8]);
				var meterPoint=Dituhui.latLonToMeters(superMapPoint);
				var point=new SuperMap.Geometry.Point(meterPoint.lon, meterPoint.lat);
				var pointVector = new SuperMap.Feature.Vector(point);
				features.push(pointVector);
			}
		});
		vectorLayer.addFeatures(features);
	}
	if(user == "admin"){
		map.zoomToExtent(markerLayer.getDataExtent());
	}else{
		map.zoomToExtent(vectorLayer.getDataExtent());
	}
}
var infowin = null;
function closeInfoWin(){
	if(infowin){
		try{
			infowin.hide();
			infowin.destroy();
		}
		catch(e){}
	}
}
function viewPath(accountId){
	var url = "http://gps.dituhui.com/wxweb/?id=" + accountId;
	window.open(url);
}
function pos(accountId){
	if(accountId == ""){
		return;
	}
	$.each(gpsData,function(i,o){
		var arr = o.split(",");
		var id = arr[0];
		if(id == accountId){
			if(arr[7] > 0){
				var superMapPoint = new SuperMap.LonLat(arr[7],arr[8]);
				var meterPoint=Dituhui.latLonToMeters(superMapPoint);
				map.setCenter(new SuperMap.LonLat(meterPoint.lon, meterPoint.lat), 16);
			}
		}
	});
}
//画线
function drawLine(data,index){
	var linePoints=[];
	var features=[];
	$.each(data,function(i,o){
		var superMapPoint = new SuperMap.LonLat(o.x,o.y);
		var meterPoint=Dituhui.latLonToMeters(superMapPoint);
		var geometry=new SuperMap.Geometry.Point(meterPoint.lon, meterPoint.lat);
		linePoints.push(geometry);
	});
	var line = new SuperMap.Geometry.LineString(linePoints);
	var lineVector = new SuperMap.Feature.Vector(line);
	lineVector.style={
		strokeColor:colors[index],
		strokeWidth:2
	};
	features.push(lineVector);
	vectorLayer.addFeatures(features);
	map.zoomToExtent(vectorLayer.getDataExtent());
}
function onGetData(data){
	if(data.indexOf("__") != -1){
		gpsData=data.split("__");
		drawPoints(gpsData);
	}else{
		alert("数量为0");
	}
}
function getGPS() {
	var url = 'http://gps.dituhui.com/wxweb/gpspos?cmd=list';
	$.ajax({
		type : 'GET',
		async : false,
		url : url,
		jsonp : 'callbacks',
		jsonpCallback : 'abc',
		dataType : 'jsonp',
		error : function(e) {
			alert("error");
		},
		success : function(e) {
			/*
			 * if(e.result.data&&e.result.data.length <= 0){ alert('时间段内没有数据');
			 * TrackTable.clear(); $("#select-gpspoint-gather").html('0'); }
			 * else{ Map.searchPath(e); TrackTable.clear();
			 * TrackTable.display(); console.log(e); d = e; }
			 */
			//alert("success");
			//alert(e.data);
			onGetData(e.data);
		}
	});
}
</script>